<template>
  <div class="top">
    <img :src="info.infoTop.img" alt="" />
    <div class="info">
      <div class="title">
        <p>歌单</p>
        <p>{{ info.infoTop.name }}</p>
      </div>
      <div class="time">
        <img :src="info.infoTop.creatorAvatar" alt="" />
        <p>{{ info.infoTop.creatorName }}</p>
        <p>创建时间： {{ info.infoTop.createTime }}</p>
      </div>
      <div class="play">
        <button
          v-for="(btn, i) in button"
          :key="btn.write"
          @mouseover="btn.write == '播放' && (button[0].icon = '#icon-bofang3-copy')"
          @mouseleave="btn.write == '播放' && (button[0].icon = '#icon-bofang')"
          @click="play(i)"
        >
          <svg class="icon" aria-hidden="true">
            <use :xlink:href="btn.icon"></use>
          </svg>
          {{ btn.write }}
        </button>
      </div>
      <div class="tag">
        <p>
          标签：<span v-for="tag in info.infoTop.tags" :key="tag">{{ tag }}</span>
        </p>
        <p>
          简介：<span>{{ info.infoTop.title }}</span>
        </p>
      </div>
    </div>
  </div>
  <MusicList
    :MusicDetailList="info.songs"
    height="40px"
    @handleIcon="handleIcon"
    ref="MusicDetailListRef"
  />
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { useRoute } from "vue-router";
import { useSendReq } from "@/store/sendReq";
import MusicList from "@/components/musicList.vue";
const route = useRoute();
const sendReq = useSendReq();
const MusicDetailListRef = ref<any>(null);
const info = reactive<any>({
  infoTop: {},
  commentNum: 0,
  songs: [],
});
const button = reactive([
  {
    icon: "#icon-bofang",
    write: "播放",
  },
  {
    icon: "#icon-wenjianjia",
    write: "收藏",
  },
  {
    icon: "#icon-fenxiang",
    write: "分享",
  },
]);
sendReq.getPlayDetail(route.query.id as string).then((res) => {
  info.infoTop = sendReq.baseInfo(res.playlist);
  info.commentNum = res.playlist.commentCount;
  res.playlist.trackIds.forEach((a: any) => {
    sendReq.getSongsDetail(a.id).then((res) => {
      res.songs[0].al.picUrll = res.songs[0].al.picUrl;
      delete res.songs[0].al.picUrl;
      const a = sendReq.songDetail(res.songs);
      a.icon = "#icon-02";
      info.songs.push(a);
    });
  });
});
const handleIcon = (index: number) => {
  info.songs[index].icon == "#icon-02"
    ? (info.songs[index].icon = "#icon-aixin1")
    : (info.songs[index].icon = "#icon-02");
};
const play = (i: number) => {
  if (!i) MusicDetailListRef.value.playMusic(0);
};
</script>

<style scoped lang="less">
.top {
  width: 100%;
  display: flex;
  padding-top: 20px;
  > img {
    width: 260px;
    height: 260px;
  }
  .info {
    margin-left: 30px;
    width: 100%;
    .title {
      display: flex;
      align-items: center;
      p {
        margin-left: 10px;
        margin-top: 10px;
      }
      p:nth-child(1) {
        width: 60px;
        height: 30px;
        border: 2px solid var(--red);
        color: var(--red);
        font-weight: 500;
        font-size: 20px;
        border-radius: 5px;
        line-height: 30px;
        text-align: center;
      }
      p:nth-child(2) {
        font-weight: 600;
        font-size: 20px;
      }
    }
    .time {
      margin-top: 20px;
      margin-left: 10px;
      display: flex;
      align-items: center;
      p {
        font-size: 20px;
      }
      img {
        border-radius: 50%;
        width: 30px;
        height: 30px;
      }
      P:nth-child(2) {
        margin: 0 10px;
      }
    }
  }
  .play {
    display: flex;
    margin-left: 10px;
    margin-top: 20px;
    align-items: center;
    button {
      width: 200px;
      height: 50px;
      font-size: 18px;
      border-radius: 10px;
      border: 0;
      text-align: center;
    }
    button:nth-child(1) {
      color: #fff;
      background-color: var(--red);
      &:hover .icon {
        background-color: #ed6363;
      }
      &:hover {
        background-color: #ed6363;
      }
    }
    button:nth-child(2) {
      margin: 0 15px;
      color: #515a6e;
      background-color: #fff;
      border: #e8eaec 1px solid;
      &:hover {
        border: 1px solid var(--blue);
      }
    }
    button:nth-child(3) {
      margin: 0 15px;
      color: #515a6e;
      background-color: #fff;
      border: #e8eaec 1px solid;
      &:hover {
        border: 1px solid var(--blue);
      }
    }
  }
  .tag {
    margin-left: 10px;
    margin-top: 30px;
    font-size: 16px;
    P {
      margin-top: 10px;
    }
    p:nth-child(1) {
      > span {
        color: #0c73c2;
      }
    }
  }
}
</style>
